import React from "react";
import { connect } from "dva";
// import ImgPlaceHold from "@components/ImgPlaceHold";
import { IMG_BASE, JUMP_URL } from "@constants";
import { px2rem, inIos, loadImgsFn,touchEventFn } from "@utils/tools";
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import style from "./detail.less";


class App extends React.PureComponent {
  state = {
    caseChildIndex:1,
  };

  componentDidMount() {

  }


  gotoPage(index){
    console.log(index,"-----")
  }

  changeChildIndex(index){
    this.setState({
      caseChildIndex:index
    })
  }


  scrollToTop(){
    Object.keys(document.getElementsByClassName("re_box")).map((item)=>{
      document.getElementsByClassName("re_box")[item].scrollTop = 0;
    })
  }

  swiperMove(index,type){
    if(type == "slidePrev"){
      window["nowSwiper"+index].slidePrev();
    }else{
      window["nowSwiper"+index].slideNext();
    }
  }

  render = () => {

  var {caseChildIndex} = this.state;
  var {caseIndex,isActive} = this.props;


    return (
          <div className="detail_page" 
            style={{
              transform:isActive?"translate(0px, 0%)":"translate(0px, -100%)"
            }}
          >
              <div className="d_head">
                <div className="goBackBtnBox" onClick={()=>{
                  this.props.goback();
                  this.scrollToTop();
                  if(window.nowSwiper1){
                    window.donotReport = true;
                      window.nowSwiper1.slideTo(0);
                      window.nowSwiper2.slideTo(0);
                      window.nowSwiper3.slideTo(0);
                      window.nowSwiper4.slideTo(0);
                  }
                  this.setState({
                      caseChildIndex:1
                  })
                }}>
                </div>
                <div className="head_img_box">
                  <img src={`${IMG_BASE}page_${caseIndex}_${caseChildIndex}.jpg`} className="page_img_head" alt="" />
                </div>
                
              </div>


              {caseIndex==1&&
              <Swiper
                spaceBetween={0}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper1 = swiper;
                }}
                
                onSlideChange={(swiper) => {
                  this.changeChildIndex(swiper.activeIndex+1)
                  setTimeout(()=>{
                    this.scrollToTop();
                  },200)
                  if(window.donotReport){
                    return
                  }
                  switch (swiper.activeIndex) {
                    case 0:
                      window.trackViewFn1();
                      break;
                    case 1:
                      window.trackViewFn2();
                      break;
                    case 2:
                      window.trackViewFn3();
                      break;
                    case 3:
                      window.trackViewFn_1_4();
                        break;
                    default:
                      break;
                  }
                }}
              >
                  {/* <div className="lr_box">
                    {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                    {caseChildIndex<3&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                  </div> */}
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                          <div className="lr_box"  style={{top:px2rem(810)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                          <img src={`${IMG_BASE}page_${caseIndex}_1.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(825)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_2.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(675)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_3.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(885)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_4.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>}
              {caseIndex==2&&
              <Swiper
                spaceBetween={0}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper2 = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                    setTimeout(()=>{
                      this.scrollToTop();
                    },200)
                    if(window.donotReport){
                    return
                  }
                  switch (swiper.activeIndex) {
                      case 0:
                        window.trackViewFn4();
                        break;
                      case 1:
                        window.trackViewFn5();
                        break;
                      case 2:
                        window.trackViewFn6();
                        break;
                      case 3:
                        window.trackViewFn7();
                        break;
                      default:
                        break;
                    }
                }}
              >
                {/* <div className="lr_box">
                    {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                    {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                  </div> */}
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                          <div className="lr_box"  style={{top:px2rem(705)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_1.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(778)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_2.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(778)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_3.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(780)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_4.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>}


              {caseIndex==3&&
              <Swiper
                spaceBetween={0}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper3 = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                    setTimeout(()=>{
                      this.scrollToTop();
                    },200)
                    if(window.donotReport){
                    return
                  }
                  switch (swiper.activeIndex) {
                      case 0:
                        window.trackViewFn8();
                        break;
                      case 1:
                        window.trackViewFn9();
                        break;
                      case 2:
                        window.trackViewFn10();
                        break;
                      case 3:
                        window.trackViewFn_3_4();
                        break;
                      default:
                        break;
                    }
                }}
              >
                {/* <div className="lr_box">
                    {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                    {caseChildIndex<3&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                  </div> */}
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(925)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_1.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(610)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_2.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(390)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_3.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(993)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<4&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_4.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>}

              {caseIndex==4&&
              <Swiper
                spaceBetween={0}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper4 = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                    setTimeout(()=>{
                      this.scrollToTop();
                    },200)
                    if(window.donotReport){
                    return
                  }
                  switch (swiper.activeIndex) {
                      case 0:
                        window.trackViewFn11();
                        break;
                      case 1:
                        window.trackViewFn12();
                        break;
                      case 2:
                        window.trackViewFn13();
                        break;
                      case 3:
                        window.trackViewFn14();
                        break;
                      case 4:
                        window.trackViewFn15();
                        break;
                      default:
                        break;
                    }
                }}
              >
                {/* <div className="lr_box">
                    {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                    {caseChildIndex<5&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                  </div> */}
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(878)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<5&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_1.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(682)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<5&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_2.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(702)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<5&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_3.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(674)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<5&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_4.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                     <div className="re_box">
                      <div className="zd_box"></div>
                      <div className="lr_box"  style={{top:px2rem(585)}} >
                            {caseChildIndex>1&&<img src={`${IMG_BASE}case_${caseIndex}_jt_z.png`} className="l_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slidePrev")}/>}
                            {caseChildIndex<5&&<img src={`${IMG_BASE}case_${caseIndex}_jt_y.png`} className="r_jt_img" alt="" onClick={this.swiperMove.bind(this,caseIndex,"slideNext")}/>}
                          </div>
                             <img src={`${IMG_BASE}page_${caseIndex}_5.jpg`} className="page_img" alt="" />
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>}


        </div>
    );
  };
}

export default connect(({ system, homePage }) => ({
  system: system.toJS(),
  homePage: homePage.toJS(),
}))(App);
